<template>
	<view class="contaier">
		<!-- <view class="nav-box">
			<view class="" v-for="(item,index) in navList" :class="{active:navIndex==index}" @click="tabClick(index)">
				{{item}}
			</view>
		</view> -->
		<view class="page-body" v-if="CurrentClient === 0">
			<map
				class="map"
				id="myMap"
				ref="myMap"
				style="width:100%;height:100vh"
				@markertap="markertap"
				:latitude="latitude"
				:longitude="longitude"
				:markers="covers"
				:scale="scale"
				:show-location="show_location"
				:enable-traffic="isTraffic"
			></map>
			<!-- 操作 -->
			<view class="operation">
				<view class="operation-item" @click="refresh">
					<image :src="e_zhongxin" mode=""></image>
					<view>刷新</view>
				</view>
				<view class="operation-item" @click="getLocation">
					<image :src="e_zhongxin" mode=""></image>
					<view>中心</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import GeocodeUtils from '@/common/geocode-utils.js';

import { map, worderdetail } from '@/common/api.js';
import { _tabContainerHeight, _windowWidth } from '@/utils/GetSys.js';
export default {
	data() {
		return {
			navList: ['加油站', '停车场', '厕所', '超市'],
			// navList: ['营业网点'],
			markerImg: ['/static/poi/dw.png'],
			initHeight: 340,
			navIndex: 0,
			map: '',
			latitude: '34.74725',
			longitude: '113.62493',
			scale: 10,
			covers: [],
			isTraffic: false,
			show_location: false,
			keywords: '',
			stationList: [],
			showList: false,
			actionShow: false,
			flag: 0,
			e_zhongxin: '',
			e_lukuang: '',
			placeholder: '/static/Group 607@2x.png',
			show: false,
			content: '',
			msgTitle: '',
			CurrentClient: uni.getStorageSync('CurrentClient') //0:用户；1：师傅
		};
	},
	onReady() {
		this.map = uni.createMapContext('myMap');
		
	},
	onLoad() {
		this.e_zhongxin = '/static/poi/e_zhongxin.png';
		this.e_lukuang = '/static/poi/e_lukuang.png';
	},
	filters: {
		formatLatlon(val) {
			if (typeof val === 'number') {
				return parseFloat(val).toFixed(2);
			}
			return 0.0;
		}
	},
	methods: {
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					// console.log(res,'更新当前经纬度');
					let { latitude, longitude } = res;
					// 设置中心
					this.latitude = latitude;
					this.longitude = longitude;
					let params = {
						token: uni.getStorageSync('usertoken'),
						lat: this.latitude,
						lon: this.longitude
					};
					// console.log(params, '师傅位置');
					map(params).then(res => {
						// console.log(res.data.data, '获取师傅列表');
					});
					this.getPoiAround();
					// 地图聚焦
					let offset = 0.005;
					let points = [
						{
							latitude: latitude + offset,
							longitude: longitude + offset
						},
						{
							latitude: latitude - offset,
							longitude: longitude - offset
						}
					];
					this.map.includePoints(points);
				}
			});
			this.show_location = true;
		},
		// 输入框内容发生变化时触发
		changeKey(e) {
			this.keywords = e;
			this.getPoiAround();
		},
		confirm() {
			this.show = false;
		},
		model(name, msg) {
			// console.log('msg', msg);
			// console.log('name', name);
			this.msgTitle = name;
			this.content = msg;
			this.show = true;
		},
		call(num) {
			uni.makePhoneCall({
				phoneNumber: num
			});
		},
		pre(img, index) {
			uni.previewImage({
				urls: [img],
				current: index
			});
		},
		markertap(e) {
			let { markerId } = e.detail;
			let item = this.covers.find(v => v.id === markerId);
			if (item && item.vehicleNo) {
				uni.navigateTo({
					url: `./realTimeMonitoringDetail?vehicleNo=${item.vehicleNo}`
				});
			}
		},
		tabClick(index) {
			this.navIndex = index;
			this.keywords = this.navList[index];
			this.covers = [];
			this.getPoiAround();
		},
		navClick(location, address) {
			uni.openLocation({
				latitude: parseFloat(location.split(',')[1]),
				longitude: parseFloat(location.split(',')[0]),
				address: address,
				success: function(res) {
					// console.log(res,'location');
				},
				fail(err) {
					// console.log('错误', err);
				}
			});
		},
		getPoiAround() {
			GeocodeUtils.getPoiAround(this.latitude, this.longitude, this.keywords, data => {
				this.stationList = [];
				this.covers = [];
				data.poisData.forEach((data, index) => {
					this.stationList.push(data);
					this.covers.push({
						id: index,
						latitude: data.lat,
						longitude: data.lon,
						iconPath: this.markerImg[this.navIndex],
						width: 60,
						height: 60,
						joinCluster: true,
						label: {
							content: this.huanhang(data.username),
							color: '#000',
							fontSize: 14,
							textAlign: 'center',
							anchorY: -70
						}
					});
				});
				this.map.includePoints({
					points: this.covers,
					padding: [50, 50, 50, 50]
				});
			});
		},

		refresh() {
			this.getPoiAround();
			uni.showToast({
				title: '位置更新了',
				icon: 'none'
			});
		},
		//路况
		traffic() {
			this.isTraffic = !this.isTraffic;
		},
		upView() {
			this.showList = !this.showList;
		},
		search() {
			this.actionShow = true;
			let value = this.keywords;
			if (!value) {
				uni.showToast({
					title: '查询内容不能为空！',
					icon: 'none'
				});
				return false;
			}
			this.getPoiAround();
		},
		seachCancel() {
			this.actionShow = false;
		},
		handletouchmove(event) {
			// console.log(event)
			if (this.flag !== 0) {
				return;
			}
			let currentX = event.touches[0].pageX;
			let currentY = event.touches[0].pageY;
			let tx = currentX - this.lastX;
			let ty = currentY - this.lastY;
			let text = '';
			this.mindex = -1;
			//左右方向滑动
			if (Math.abs(tx) > Math.abs(ty)) {
				if (tx < 0) {
					text = '向左滑动';
					console.log('向左滑动');
					this.flag = 1;
					//	this.getList();  //调用列表的方法
				} else if (tx > 0) {
					text = '向右滑动';
					console.log('向右滑动');
					this.flag = 2;
				}
			} else {
				//上下方向滑动
				if (ty < 0) {
					text = '向上滑动';
					console.log('向上滑动');
					this.flag = 3;
					// 调整盒子高低
					uni.getSystemInfo({
						success: res => {
							this.showList = true;
						}
					});
					//	this.getList();  //调用列表的方法
				} else if (ty > 0) {
					text = '向下滑动';
					console.log('向下滑动');
					this.flag = 4;
					// 调整盒子高低
					uni.getSystemInfo({
						success: res => {
							this.showList = false;
						}
					});
				}
			}
			//将当前坐标进行保存以进行下一次计算
			this.lastX = currentX;
			this.lastY = currentY;
			this.text = text;
		},
		handletouchstart(event) {
			// console.log(event)
			this.lastX = event.touches[0].pageX;
			this.lastY = event.touches[0].pageY;
		},
		handletouchend(event) {
			this.flag = 0;
			this.text = '没有滑动';
		},
		huanhang(s) {
			var re = '';
			var length = s.length;
			for (var i = 0, j = 1; i < length; i++, j++) {
				re += s[i];
				if (j && j % 6 == 0) {
					re += '\n';
				}
			}
			return re;
		}
	},
	onShow() {
		this.CurrentClient = uni.getStorageSync('CurrentClient');
		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			curPages.getTabBar().setData({
				selected: 1
			});
		}
		if (this.CurrentClient === 0) {
			//用户端
			this.getLocation();
		}
		if (this.CurrentClient === 1) {
			// 师傅端
		}
	}
};
</script>

<style lang="scss" scoped>
.money {
	color: red;
	font-size: 28rpx;

	image {
		height: 38rpx;
		width: 33rpx;
		position: relative;
		top: 8rpx;
	}
}

.dhitem-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.addres {
	}

	.btn-nav {
		width: 100rpx;
		height: 100rpx;
		line-height: 45rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #00a232;
		font-size: 24rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.nav-box {
	display: flex;
	text-align: center;
	height: 80rpx;
	align-items: center;
	border-bottom: 1px solid #gray;
	box-shadow: -1rpx 4rpx 10rpx rgba(2, 90, 221, 0.17);

	view {
		flex: 1;
		font-size: 28rpx;
	}

	.active {
		color: #334be7;
		font-weight: bold;
	}
}

.operation {
	width: 85rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: -1rpx 4rpx 16rpx rgba(2, 90, 221, 0.17);
	border-radius: 10rpx;
	position: absolute;
	bottom: 580rpx;
	right: 21rpx;
	padding-top: 10rpx;
	z-index: 10;

	&-item {
		text-align: center;
		margin-bottom: 10rpx;

		view {
			font-size: 30rpx;
			font-family: SourceHanSansCN-Medium;
			line-height: 32rpx;
			color: rgba(102, 102, 102, 1);
		}
	}

	&-item:nth-child(1) {
		margin-bottom: 24rpx;

		image {
			width: 40rpx;
			height: 32rpx;
		}
	}

	&-item:nth-child(2) {
		margin-bottom: 10rpx;

		image {
			width: 39rpx;
			height: 39rpx;
		}
	}

	&-item:nth-child(3) {
		margin-bottom: 15rpx;

		image {
			width: 42rpx;
			height: 22rpx;
		}
	}
}

.gas-station {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	box-shadow: 8rpx 0 24rpx rgba(57, 111, 250, 0.23);
	opacity: 1;
	border-radius: 20rpx 20rpx 0 0;
	position: absolute;
	bottom: 0;
	z-index: 100;

	&-arrow {
		display: flex;
		justify-content: center;
	}

	.station-list {
		padding: 0rpx;
		transition: all 0.3s;
		overflow: hidden;

		background: #f1f1f1;

		.maplist {
			background: #ffffff;
			padding: 10rpx 20rpx;
			margin: 10rpx 0;
		}

		.item {
			background: #ffffff;
			display: flex;
			margin-top: 10rpx;
			align-items: center;

			.item-img {
				flex-shrink: 0;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					border: 1px solid #f2f2f2;
				}
			}

			.item-info {
				width: 100%;
				padding: 5rpx 15rpx;

				text {
					color: #334be7;
				}

				.item-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				view:nth-child(2) {
					margin-top: 5rpx;
					font-size: 28rpx;
				}

				view:nth-child(3) {
					margin-top: 10rpx;
					font-size: 28rpx;
				}

				.item-nav {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.btn-nav {
						// width: 100rpx;
						padding: 0 20rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						border: 1px solid #003690;
						border-radius: 6rpx;
						color: #003690;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
</style>
